<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Registration</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="css/dashboard.css" type="text/css"/>
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"/>
        <script>
            function showSuggestions() {
                var input = document.getElementById('geocomplete');
                var autocomplete = new google.maps.places.Autocomplete(input);
            }
        </script>
    </h:head>
    <h:body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                        <a class="navbar-brand" href="index.xhtml">MeteoCal</a>
                </div>
            </div>
        </nav>
        <div class="container">
            <br/>
            <br/>
		<div class="row">
			<!-- content -->
                        <center>
			<div class="main">
			 <h:form id="registrationform">
                            <p:panel header="Registration Form">
                                <h:panelGrid columns="3" id="regGrid">
                                    <h:outputLabel for="name">Name:</h:outputLabel>
                                    <p:inputText id="name" value="#{registrationBean.user.name}">
                                        <p:ajax update="namemsg"/>
                                    </p:inputText>
                                    <p:message id="namemsg" for="name" />

                                    <h:outputLabel for="surname">Surname:</h:outputLabel>
                                    <p:inputText id="surname" value="#{registrationBean.user.surname}">
                                        <p:ajax update="surnamemsg"/>
                                    </p:inputText>
                                    <p:message id="surnamemsg" for="surname" />

                                    <h:outputLabel for="birthday" value="Birthday:" />
                                    <p:calendar id="birthday" value="#{registrationBean.user.birthday}" navigator="true" pattern="dd/MM/yyyy" yearRange="c-100:c">
                                        <p:ajax update="birthdaymsg"/>
                                    </p:calendar>
                                    
                                    <p:message id="birthdaymsg" for="birthday" />

                                    <h:outputLabel for="phoneNumber">Phone Number:</h:outputLabel>
                                    <p:inputText id="phoneNumber" value="#{registrationBean.user.phoneNumber}">
                                        <p:ajax update="phoneNumbermsg"/>
                                    </p:inputText>
                                    <p:message id="phoneNumbermsg" for="phoneNumber" />

                                    <h:outputLabel for="geocomplete">Residence Town:</h:outputLabel>
                                    <input id="geocomplete" name="geocomplete" class="controls" type="text" placeholder="Type in an address" onfocus="showSuggestions()"/>
                                    <h:outputLabel></h:outputLabel>
                                    
                                    <p:outputLabel for="privacy" value="Calendar Visibility: " />
                                    <p:selectOneRadio id="privacy" value="#{registrationBean.user.calendarPublic}">
                                        <f:selectItem itemLabel="Public" itemValue="true" />
                                        <f:selectItem itemLabel="Private" itemValue="false" />
                                    </p:selectOneRadio>
                                    <p:message id="privacymsg" for="privacy" />

                                    <h:outputLabel for="email">Email:</h:outputLabel>
                                    <p:inputText id="email" value="#{registrationBean.user.email}" >
                                        <f:validator validatorId="uniqueEmailValidator" />
                                        <f:ajax event="blur" render="emailmsg" />
                                    </p:inputText>
                                    <p:message id="emailmsg" for="email" />

                                    <h:outputLabel for="password">Password:</h:outputLabel>
                                    <p:password id="password" value="#{registrationBean.user.password}"
                                                feedback="true" match="pwd2" label="Password"/>
                                    <p:message id ="passwordMessage" for="password" />

                                    <h:outputLabel for="pwd2">Confirm Password:</h:outputLabel>
                                    <p:password id="pwd2" label="Confirm Password"/>
                                </h:panelGrid>
                                <p:messages id="messageError" globalOnly="true" showDetail="true" autoUpdate="true" closable="true" />
                                <p:commandButton id="submit" value="Register" update="regGrid"
                                                 action="#{registrationBean.register()}" />
                            </p:panel>
                        </h:form>
			</div>
                        </center>
		</div>
        </div>
        <footer class="footer">
            <div class="container">
                <p class="text-muted"><center>&copy; Daniele Marangoni - Matteo Montalcini - Daniele Moro 2014</center></p>
            </div>
        </footer>
    </h:body>
</html>

